import React, { Component } from 'react'
import { createBottomTabNavigator, createStackNavigator } from 'react-navigation'
import {
  Image,
  StyleSheet,
  Text
} from 'react-native'

import DeskScreen from './views/desk'
import CategoryScreen from './views/category'
import ReaderScreen from './views/read'
import BooksListScreen from './views/bookList'
import BookInfo from './views/bookInfo'
import Leader from './views/leader'
import Search from './views/search'

const TabStack = createBottomTabNavigator({
  Desk: {
    screen: DeskScreen
  },
  Category: {
    screen: CategoryScreen
  }
},{
  initialRouteName: 'Category',
  navigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused, tintColor }) => {
    const { routeName } = navigation.state
    let icon
    if (routeName === 'Desk') {
      icon = focused ? require('./img/home_tab_bar_icon_bookdesk_press.png') : require('./img/home_tab_bar_icon_bookdesk_normal.png')
    } else if (routeName === 'Category') {
      icon = focused ? require('./img/nav_classify_ic_focus.png') : require('./img/nav_classify_ic_normal.png')
    } else if (routeName === 'Leader') {
      icon = focused ? require('./img/home_tab_bar_icon_leadread_press.png') : require('./img/home_tab_bar_icon_leadread_normal.png')
    }
    return <Image style={styles.base} source={icon} />
    },
    tabBarLabel:({ focused, tintColor }) => {
      const { routeName } = navigation.state
      let label = ''
      if (routeName === 'Desk') {
        label = '书桌'
      } else if (routeName === 'Category') {
        label = '分类'
      } else if (routeName === 'Leader') {
        label = '领读'
      }
      if (focused) {
        return <Text style={[styles.tabItem, styles.tabItemActive]}>{label}</Text>
      } else {
        return <Text style={styles.tabItem}>{label}</Text>
      }
      
    }
  }),
  tabBarOptions: {
    style: {
      backgroundColor: '#fff',
      height: 50,
      paddingBottom: 5,
      paddingTop: 5
      
    }
  }
})

const RootStack = createStackNavigator({
  Tab: {
    screen: TabStack
  },
  Reader: {
    screen: ReaderScreen
  },
  BooksList: {
    screen: BooksListScreen
  },
  BookInfo: {
    screen: BookInfo
  },
  Search: {
    screen: Search
  }
}, {
  initialRouteName: 'Tab',
  headerMode: 'none'
})

export default class App extends Component {
  render () {
    return <RootStack />
  }
}

const styles = StyleSheet.create({
  base: {
    width: 24,
    height: 24
  },
  tabItem: {
    textAlign: 'center',
    fontSize: 10,
    color: '#b3b3b3'
  },
  tabItemActive: {
    color: '#333'
  }
})